<template>
  <div v-if="visible" class="form-redirect-div" :style="bodyStyle">
    <div class="form-redirect-div-toolbar">
      <div class="form-redirect-div-button-group">
        <a-popconfirm placement="bottomRight" :title="$t('m.common.tip.save_confirm')" @confirm="() => saveDraft()"
                      v-if="!readOnly && footer !== null && enableDraft" :disabled="spinning > 0">
          <a-button icon="save" type="primary">{{ $t('m.common.button.saveDraft') }}</a-button>
        </a-popconfirm>
        <a-popconfirm placement="bottomRight" :title="$t('m.common.tip.save_confirm')" @confirm="() => handleOk()"
                      v-if="!readOnly && footer !== null" :disabled="spinning > 0">
          <a-button icon="save" type="primary">{{ $t('m.common.button.save') }}</a-button>
        </a-popconfirm>
        <a-button type="link" icon="close" @click="handleCancel" :disabled="spinning > 0"></a-button>
      </div>
    </div>
    <form-redirect v-if="formType === 'form'"
                   style="margin-top: 40px"
                   ref="formRedirect"
                   :func="func"
                   :formId="formId"
                   :formCode="formCode"
                   :fks="fks"
                   :parentValue="parentValue"
                   :saveInPage="saveInPage"
                   :disQueryDB="disQueryDB"
                   :record="record"
                   :stores="stores"
                   :hiddenSaveBut="true"
                   @close="close"
                   @hideDialogButtons="hideDialogButtons"
                   @addParentSpinning="addSpinning"
                   @delParentSpinning="delSpinning"
                   @refreshParent="refreshParent"
                   @setFormTitle="setFormTitle"
                   @setEnableDraft="setEnableDraft">
    </form-redirect>
    <view-layout-redirect v-else-if="formType === 'view'"
                          ref="viewRedirect"
                          :view-code="formCode"
                          :stores="stores"
                          :formOption="formOption"
                          :parameterValue="parameterValue"
                          :isShowInTab="true"
                          @closeFromView="close"
                          @hideDialogButtonsFromView="hideDialogButtons"
                          @addParentSpinningFromView="addSpinning"
                          @delParentSpinningFromView="delSpinning"
                          @refreshParent="refreshParent"
                          @handleOkFromView="handleOk"
                          @setFormTitleFromView="setFormTitle"
                          @addFormInCurrentTab="addFormInCurrentTab"
                          @editFormInCurrentTab="editFormInCurrentTab"
                          @detailFormInCurrentTab="detailFormInCurrentTab"
                          @setEnableDraft="setEnableDraft">
    </view-layout-redirect>

    <form-redirect-div ref="formInCurrent" :stores="stores" class="form-redirect-sub-div" @hideParent="hideParent"></form-redirect-div>
  </div>
</template>

<script>

import FormRedirect from './FormRedirect'
import {TabInCurrentMixin} from "./TabInCurrentMixin";

export default {
  name: 'FormRedirectDiv',
  components: {
    FormRedirect,
    ViewLayoutRedirect: () => import('./ViewLayoutRedirect')
  },
  mixins: [TabInCurrentMixin],
  props: {
    // 仅在页面暂时存储，用于子表添加
    saveInPage: {
      type: Boolean,
      default: false
    },
    isSysRouteTabRoot: {
      type: Boolean,
      default: true
    },
    stores: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    formOption() {
      return {
        func: this.func,
        formId: this.formId,
        fks: this.fks,
        parentValue: this.parentValue,
        saveInPage: this.saveInPage,
        disQueryDB: this.disQueryDB,
        record: this.record,
        isTab: true,
      }
    },
    bodyStyle() {
      let style = {};
      if (this.formType === 'view') {
        style = {
          padding: 0,
          margin: 0,
          background: "#F0F2F5"
        }
      }
      if (this.hideParentVisible) {
        style['overflow'] = 'hidden'
      } else {
        style['overflow'] = 'auto'
      }
      return style
    },
  },
  data() {
    return {
      title: this.$t('m.eform.formDesign.label.biao-dan-ye-mian'),
      visible: false,
      func: null,
      formId: null,
      formCode: null,
      fks: null,
      parentValue: {},
      readOnly: false,
      footer: undefined,
      dialogSize: 'default',
      spinning: 0,
      disQueryDB: false, // 不查询数据库
      record: null, // 页面对象
      formType: 'form',
      parameterValue: [],
      refreshParentFunc: null,
      hideParentVisible: false,
      enableDraft: false,
      needClose: false,
    }
  },
  methods: {
    //设置标题
    setFormTitle(title) {
      let titleName = title || this.$t('m.eform.formDesign.label.biao-dan')
      let funcName = this.$t('m.common.button.add')
      if (this.func === 'edit') {
        funcName = this.$t('m.common.button.update')
      } else if (this.func === 'detail') {
        funcName = this.$t('m.common.title.detail')
      }
      this.title = funcName + " " + titleName
    },
    handleCancel() {
      if (this.spinning > 0) {
        this.needClose = true
        return;
      }
      this.visible = false
    },
    handleOk($vue,isDraft) {
      const that = this;
      this.addSpinning();
      if (this.formType === 'form') {
        this.$refs.formRedirect.save(this.afterSave)
      } else {
        $vue.save(this.afterSave,null,isDraft)
      }
      setTimeout(function () {
        that.delSpinning();
      }, 500)
    },
    saveDraft(){
      const that = this;
      this.addSpinning();
      this.$refs.formRedirect.save(this.afterSave,null,true)
      setTimeout(function () {
        that.delSpinning();
      }, 500)
    },
    afterSave(id,saveSucessMsg) {
      if(saveSucessMsg){
        this.messageUtil.success(saveSucessMsg)
      }else{
        this.messageUtil.success(this.$t('m.eform.formDesign.label.bao-cun-cheng-gong'))
      }
      // view方式时，不关闭当前页面
      // 普通模式（form）时，关闭当前页面
      // 后续改为可配置参数
      if (this.formType === 'form') {
        this.visible = false
      }
    },
    hideDialogButtons() {
      this.setFooter(null)
    },
    //关闭页面
    close() {
      this.handleCancel()
    },
    //刷新父页面
    refreshParent(id, tableName, formData) {
      // this.$emit('refreshParent', id, tableName, formData)
      if (typeof this.refreshParentFunc === "function") {
        this.refreshParentFunc(id, tableName, formData)
      }
    },
    setFooter(value) {
      this.footer = this.formType === 'view' ? null : value
    },
    add(formCode, fks, parentValue, dialogSize) {
      this.addForm({
        formCode: formCode,
        fks: fks,
        parentValue: parentValue,
        dialogSize: dialogSize,
      })
    },
    addForm(options, refreshParentFunc) {
      this.formType = options.formType || 'form'
      this.dialogSize = options.dialogSize || 'default'
      this.disQueryDB = false
      this.record = null
      this.func = 'add'
      this.formId = undefined
      this.formCode = options.formCode
      this.fks = options.fks
      this.parentValue = options.parentValue || {}
      this.parameterValue = options.parameterValue || []
      this.title = this.$t('m.common.button.add')
      this.readOnly = false
      this.enableDraft = false
      this.visible = true
      this.needClose = false
      this.setFooter(undefined)
      this.spinning = 0;
      this.refreshParentFunc = refreshParentFunc
    },
    edit(id, formCode, dialogSize, disQueryDB, record) {
      this.editForm({
        id: id,
        formCode: formCode,
        dialogSize: dialogSize,
        disQueryDB: disQueryDB,
        record: record,
      })
    },
    editForm(options, refreshParentFunc) {
      this.formType = options.formType || 'form'
      this.dialogSize = options.dialogSize || 'default'
      this.disQueryDB = options.disQueryDB;
      this.record = options.record;
      this.func = 'edit'
      this.formId = options.id
      this.formCode = options.formCode
      this.fks = null
      this.parentValue = {}
      this.parameterValue = options.parameterValue || []
      this.title = this.$t('m.common.button.update')
      this.readOnly = false
      this.enableDraft = false
      this.visible = true
      this.needClose = false
      this.setFooter(undefined)
      this.spinning = 0;
      this.refreshParentFunc = refreshParentFunc
    },
    detail(id, formCode, dialogSize, disQueryDB, record) {
      this.detailForm({
        id: id,
        formCode: formCode,
        dialogSize: dialogSize,
        disQueryDB: disQueryDB,
        record: record,
      })
    },
    detailForm(options, refreshParentFunc) {
      this.formType = options.formType || 'form'
      this.dialogSize = options.dialogSize || 'default'
      this.disQueryDB = options.disQueryDB;
      this.record = options.record;
      this.func = 'detail'
      this.formId = options.id
      this.formCode = options.formCode
      this.fks = null
      this.parentValue = {}
      this.parameterValue = options.parameterValue || []
      // 纯列表页面不需要标题，表单页面会设置标题
      this.title = this.$t('m.common.title.detail')
      this.readOnly = true
      this.visible = true
      this.needClose = false
      this.setFooter(undefined)
      this.spinning = 0;
      this.refreshParentFunc = refreshParentFunc
    },
    addSpinning() {
      this.spinning++
    },
    delSpinning() {
      this.spinning--
      if (this.spinning === 0 && this.needClose) {
        this.needClose = false
        this.handleCancel()
      }
    },
    hideParent(visible){
      this.hideParentVisible = visible
    },
    setEnableDraft(enableDraft){
      this.enableDraft = enableDraft
    }
  },
  watch: {
    visible(val) {
      this.$emit("hideParent", val)
    }
  }
}
</script>
<style scoped lang="less">
.form-redirect-div {
  position: relative;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: white;
  padding: 24px;
  z-index: 999;

  .form-redirect-div-toolbar {
    position: absolute;
    top: 12px;
    right: 0;
    z-index: 1000;
    height: 50px;
    line-height: 50px;
    padding: 0 10px 8px 10px;
    background: transparent;

    .form-redirect-div-button-group {
      display: inline-block;
      float: right;

      .ant-btn {
        margin: 6px 6px;
        border: 0;
      }
    }
  }

  .form-redirect-sub-div{
    z-index: 1000;
  }
}
</style>
